<script setup>
defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
  showButton: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
})
</script>

<template>
  <div class="flex p-10">
    <div class="mr-10 f-c-c">
      <el-avatar size="default" :src="info.avatar" alt="头像" />
    </div>
    <div class="flex-col gap-2">
      <span class="line-clamp-1 font-size-18">{{ info.nickName }}</span>
      <span class="line-clamp-1 font-size-14 op-text">{{ info.job }}</span>
    </div>
  </div>
  <slot name="content" />
  <div v-if="showButton" class="flex justify-between p-10">
    <el-button class="flex-1" type="primary">
      关注
    </el-button>
    <el-button class="flex-1">
      私信
    </el-button>
  </div>
  <div v-if="showFooter">
    <slot v-if="$slots.footer" name="footer" />
    <div v-else>
      <div class="p-8">
        <el-divider />
      </div>
      <div class="flex">
        <div class="flex-col flex-1 items-center gap-5">
          <span class="font-size-16">12</span>
          <span class="op-text">关注</span>
        </div>
        <div class="flex-col flex-1 items-center gap-5">
          <span class="font-size-16">12</span>
          <span class="op-text">粉丝</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 1px 0;
  opacity: 0.8;
}
</style>
